<template>
	<view class="login-container">
		<!-- 上方标题部分 -->
		<view class="header">
			<u-text text="欢迎登录" size="40" bold color="#333"></u-text>
			<u-text text="让观影更简单" size="26" color="#666" margin="20rpx 0"></u-text>
		</view>
		
		<!-- 下方登录部分 -->
		<view class="login-section">
			<view class="login-buttons">
				<u-button 
					type="success" 
					icon="weixin-fill" 
					text="微信一键登录" 
					@click="wechatLogin"
					class="login-btn"
					:customStyle="{
						background: '#07c160',
						color: '#ffffff',
						borderRadius: '50rpx',
						border: 'none'
					}"
				></u-button>
				
				<u-button 
					type="primary" 
					icon="zhifubao-circle-fill" 
					text="支付宝一键登录" 
					@click="alipayLogin"
					class="login-btn"
					:customStyle="{
						background: '#1677ff',
						color: '#ffffff',
						borderRadius: '50rpx',
						border: 'none'
					}"
				></u-button>
				
				<u-button 
					type="info" 
					icon="phone" 
					text="手机号登录" 
					@click="phoneLogin"
					class="login-btn"
					:customStyle="{
						background: '#f4f4f5',
						color: '#333333',
						borderRadius: '50rpx',
						border: 'none'
					}"
				></u-button>
			</view>
			
			<view class="footer-text">
				<text class="agreement-text">登录即代表同意</text>
				<text class="link-text" @click="openUserAgreement">《用户协议》</text>
				<text class="agreement-text">和</text>
				<text class="link-text" @click="openPrivacyPolicy">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			API: getApp().globalData().API
		}
	},
	methods: {
		wechatLogin() {
			// 实现微信登录逻辑
			let that = this;
			uni.showLoading({
				title: '登录中...'
			})
			uni.login({
				provider:'weixin',
				success(res){
					uni.request({
						url: that.API + "/user/wxlogin",
						method: 'GET',
						data: {
							code: res.code
						},
						success(loginRes){
							uni.setStorageSync("token",loginRes.data.data)
							uni.hideLoading()
							uni.showToast({
								title: '登录成功',
								duration: 1000,
								icon: 'success'
							})
							setTimeout(function(){
								uni.switchTab({
									url: '/pages/homepage/homepage'
								})
							},1000)
						},
						fail(err){
							uni.hideLoading()
							uni.showToast({
								title: '连接丢失,登录失败',
								duration: 1000,
								icon: 'error'
							})
						}
					})
				}
			})
		},
		alipayLogin() {
			// 实现支付宝登录逻辑
			uni.showToast({
				title: '支付宝登录功能待实现',
				icon: 'none'
			})
		},
		phoneLogin() {
			// 跳转到手机号登录页面
			uni.showToast({
				title: '手机号登录功能待实现',
				icon: 'none'
			})
		},
		openUserAgreement() {
			uni.showToast({
				title: '用户协议待实现',
				icon: 'none'
			})
		},
		openPrivacyPolicy() {
			uni.showToast({
				title: '隐私政策待实现',
				icon: 'none'
			})
		}
	}
}
</script>

<style lang="scss">
.login-container {
	min-height: 100vh;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	
	.header {
		height: 300rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx 40rpx;
		background: linear-gradient(to bottom, #f8f8f8, #ffffff);
	}
	
	.login-section {
		padding: 40rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		
		.login-buttons {
			margin-top: 120rpx;  // 增加顶部间距
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 60rpx;  // 使用gap属性设置按钮间距
			
			.login-btn {
				width: 85%;
				height: 90rpx;
				
				:deep(.u-button) {
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
				}
			}
		}
		
		.footer-text {
			margin-top: auto;
			padding-bottom: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			
			.agreement-text {
				color: #999;
			}
			
			.link-text {
				color: #1677ff;
				margin: 0 4rpx;
			}
		}
	}
}
</style>
